<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS元素显示与隐藏</title>
    <style>
        .show-heide, .show-heide-pseudo {
            position: relative;
            width: 350px;
            height: 280px;
            margin: 50px auto;
            background-image: url("../img/video.jpeg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .show-heide:hover .cover {
            display: block;
        }

        .cover {
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url("../img/bf.png") no-repeat center;
        }

        /*伪元素实现*/
        .show-heide-pseudo:hover::after {
            display: block;
        }

        .show-heide-pseudo::after {
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url("../img/bf.png") no-repeat center;
            content: '';
        }
    </style>
</head>
<body>
<!--元素显示隐藏实现-->
<div class="show-heide">
    <div class="cover"></div>
</div>

<!--伪元素实现(去掉一个div标签，结构更简单)-->
<div class="show-heide-pseudo">
</div>
</body>
</html>